<template>
    <el-form ref="user" :model="user" :rules="rules" label-width="150px" class="demo-user">
        <el-form-item label="姓名" prop="userName">
            <el-input v-model="user.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-select v-model="user.sex" placeholder="性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="民族">
            <el-select v-model="user.nation" placeholder="请选择民族">
                <el-option label="汉族" value="汉族"></el-option>
                <el-option label="蒙古族" value="蒙古族"></el-option>
                <el-option label="回族" value="回族"></el-option>
                <el-option label="藏族" value="藏族"></el-option>
                <el-option label="维吾尔族" value="维吾尔族"></el-option>
                <el-option label="苗族" value="苗族"></el-option>
                <el-option label="彝族" value="彝族"></el-option>
                <el-option label="壮族" value="壮族"></el-option>
                <el-option label="布依族" value="布依族"></el-option>
                <el-option label="朝鲜族" value="朝鲜族"></el-option>
                <el-option label="满族" value="满族"></el-option>
                <el-option label="侗族" value="侗族"></el-option>
                <el-option label="瑶族" value="瑶族"></el-option>
                <el-option label="白族" value="白族"></el-option>
                <el-option label="土家族" value="土家族"></el-option>
                <el-option label="哈尼族" value="哈尼族"></el-option>
                <el-option label="哈萨克族" value="哈萨克族"></el-option>
                <el-option label="傣族" value="傣族"></el-option>
                <el-option label="黎族" value="黎族"></el-option>
                <el-option label="僳僳族" value="僳僳族"></el-option>
                <el-option label="佤族" value="佤族"></el-option>
                <el-option label="畲族" value="畲族"></el-option>
                <el-option label="高山族" value="高山族"></el-option>
                <el-option label="拉祜族" value="拉祜族"></el-option>
                <el-option label="水族" value="水族"></el-option>
                <el-option label="东乡族" value="东乡族"></el-option>
                <el-option label="纳西族" value="纳西族"></el-option>
                <el-option label="景颇族" value="景颇族"></el-option>
                <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
                <el-option label="土族" value="土族"></el-option>
                <el-option label="达斡尔族" value="达斡尔族"></el-option>
                <el-option label="仫佬族" value="仫佬族"></el-option>
                <el-option label="羌族" value="羌族"></el-option>
                <el-option label="布朗族" value="布朗族"></el-option>
                <el-option label="撒拉族" value="撒拉族"></el-option>
                <el-option label="毛南族" value="毛南族"></el-option>
                <el-option label="仡佬族" value="仡佬族"></el-option>
                <el-option label="锡伯族" value="锡伯族"></el-option>
                <el-option label="阿昌族" value="阿昌族"></el-option>
                <el-option label="普米族" value="普米族"></el-option>
                <el-option label="塔吉克族" value="塔吉克族"></el-option>
                <el-option label="怒族" value="怒族"></el-option>
                <el-option label="乌孜别克族" value="乌孜别克族"></el-option>
                <el-option label="俄罗斯族" value="俄罗斯族"></el-option>
                <el-option label="鄂温克族" value="鄂温克族"></el-option>
                <el-option label="德昂族" value="德昂族"></el-option>
                <el-option label="保安族" value="保安族"></el-option>
                <el-option label="裕固族" value="裕固族"></el-option>
                <el-option label="京族" value="京族"></el-option>
                <el-option label="塔塔尔族" value="塔塔尔族"></el-option>
                <el-option label="独龙族" value="独龙族"></el-option>
                <el-option label="鄂伦春族" value="鄂伦春族"></el-option>
                <el-option label="赫哲族" value="赫哲族"></el-option>
                <el-option label="门巴族" value="门巴族"></el-option>
                <el-option label="珞巴族" value="珞巴族"></el-option>
                <el-option label="基诺族" value="基诺族"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="出生日期" required>
            <el-col :span="11">
                <el-form-item prop="dateOfBirth">
                    <el-date-picker v-model="user.dateOfBirth" type="date" placeholder="选择日期" style="width: 100%">
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="最高学位" prop="education">
            <el-select v-model="user.education" placeholder="学位">
                <el-option label="博士" value="博士"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="学士" value="学士"></el-option>
                <el-option label="无" value="无" @click="changeTime()"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="学位授予时间">
            <el-col :span="11">
                <el-form-item prop="degreeGrantingTime">
                    <el-date-picker v-model="user.degreeGrantingTime" type="date" placeholder="选择日期" style="width: 100%"
                        v-if="user.education == '无' || user.education == null" disabled></el-date-picker>
                    <el-date-picker v-model="user.degreeGrantingTime" type="date" placeholder="选择日期" style="width: 100%"
                        v-else></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>

        <el-form-item label="最高学历" prop="degree">
            <el-select v-model="user.degree" placeholder="学历">
                <el-option label="博士研究生" value="博士研究生" v-if="user.education == '博士'"></el-option>
                <el-option label="硕士研究生" value="硕士研究生" v-if="user.education =='硕士'||user.education == '博士'"></el-option>
                <el-option label="研究生班" value="研究生班" v-if="user.education =='硕士'"></el-option>
                <el-option label="大学本科" value="大学本科" v-if="user.education == '学士'"></el-option>
                <el-option label="其他" value="其他" ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="人员类别" prop="personnelCategory">
            <el-select v-model="user.personnelCategory" placeholder="请选择人员类别">
                <el-option label="本校在岗教师" value="本校在岗教师"></el-option>
                <el-option label="已退休教师" value="已退休教师"></el-option>
                <el-option label="在读研究生" value="在读研究生" v-if="user.education != '博士'"></el-option>
                <el-option label="柔性引进" value="柔性引进"></el-option>
                <el-option label="已调离人员" value="已调离人员"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="user.phoneNumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>

        <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="user.mail" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>


        <el-form-item label="政治面貌" prop="politicalOutlook">
            <el-select v-model="user.politicalOutlook" placeholder="请选择政治面貌">
                <el-option label="中共党员" value="中共党员"></el-option>
                <el-option label="中共预备党员" value="中共预备党员"></el-option>
                <el-option label="共青团员" value="共青团员"></el-option>
                <el-option label="民革党员" value="民革党员"></el-option>
                <el-option label="民建会员" value="民建会员"></el-option>
                <el-option label="民进会员" value="民进会员"></el-option>
                <el-option label="农工党党员" value="农工党党员"></el-option>
                <el-option label="致公党党员" value="致公党党员"></el-option>
                <el-option label="九三学社社员" value="九三学社社员"></el-option>
                <el-option label="台盟盟员" value="台盟盟员"></el-option>
                <el-option label="无党派人士" value="无党派人士"></el-option>
                <el-option label="群众" value="群众"></el-option>
                <el-option label="民盟盟员" value="民盟盟员"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="是否是高层次人才">
            <el-radio-group v-model="highLevelTalents">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('user')">保存设置</el-button>
            <el-button @click="resetForm('user')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {
        getUser
    } from "@/api/publicUser";
    import request from '@/utils/request'
    import {ElMessageBox } from 'element-plus'

    export default {
        name: "publicUserInformation",
        data() {
            var validateDate = (rule, value, callback) => {
                if(value == '' || value ==null){
                    callback();
                }
                else if (Date.parse(this.user.dateOfBirth) >= Date.parse(value)) {
                    callback(new Error('违法的学位授予时间!'));
                } else {
                    callback();
                }
            };
            
            var validateEmail = (rule, value, callback) => {
                var emreg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
                if(value == '' || value ==null){
                    callback();
                }
                else if (!emreg.test(value)) {
                    callback(new Error('违法的邮箱地址!'));
                } else {
                    callback();
                }
            };
            return {
                highLevelTalents: '',
                user: {
                    userName: '',
                    sex: '',
                    nation: '',
                    dateOfBirth: '',
                    education: '',
                    degreeGrantingTime: '',
                    degree: '',
                    personnelCategory: '',
                    phoneNumber: '',
                    mail: '',
                    politicalOutlook: '',
                    highLevelTalents: '',
                },
                rules: {
                    userName: [{
                            required: true,
                            message: '请输入您正确的名字',
                            trigger: 'blur',
                        },
                        {
                            min: 2,
                            message: '请输入您正确的名字',
                            trigger: 'blur',
                        },
                    ],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'change',
                    }, ],
                    dateOfBirth: [{
                        type: 'date',
                        required: true,
                        message: '请选择出生日期',
                        trigger: 'change',
                    }, ],
                    degreeGrantingTime: [{
                            type: 'date',
                        },
                        {
                            validator: validateDate,
                            trigger: 'change',
                        }
                    ],
                    education: [{
                        required: true,
                        message: '请选择学位',
                        trigger: 'change',
                    }],
                    degree: [{
                        required: true,
                        message: '请选择学历',
                        trigger: 'change',
                    }],
                    personnelCategory: [{
                        required: true,
                        message: '请选择人员类别',
                        trigger: 'change',
                    }, ],
                    phoneNumber: [{
                        required: true,
                        message: '请输入您的手机号码',
                        trigger: 'blur',
                    },{
                        min: 11,
                        max: 11,
                        message: '手机号码位数不对',
                        trigger: 'blur',
                    }],
                    politicalOutlook: [{
                        required: true,
                        message: '请选择您的政治面貌',
                        trigger: 'change',
                    }],
                    email:[{
                        validator: validateEmail,
                        trigger: 'blur',
                    }],
                },
            }
        },
        created() {
            this.load();
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.highLevelTalents == '是') this.user.highLevelTalents = true;
                        else this.user.highLevelTalents = false;
                        request({
                            url: '/user',
                            headers: {
                                isToken: true
                            },
                            method: 'post',
                            timeout: 20000,
                            data: this.user
                        }).then(() => {
                            ElMessageBox.alert('修改已完成，需重新加载页面', '系统提示', {
                                confirmButtonText: '确定',
                                type: 'success'
                              }
                            ).then(() => {
                               location.reload();
                            }).catch(() => {});
                        });
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
            load() {
                getUser().then(res => {
                    this.user = res.data.user;
                    if (this.user.highLevelTalents) this.highLevelTalents = '是';
                    else this.highLevelTalents = '否'
                })
            },
            changeTime(){
                this.user.degreeGrantingTime = '';
            }
        },
    }
</script>

<style scoped>
    .el-input {
        width: 20%
    }
</style>
